<template>
    <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">选择日期：</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="~"
        start-placeholder="2022-10-02"
        end-placeholder="2023-10-02"
      />
      <span class="demonstration">学年学期：</span>
      <el-select v-model="value" class="m-1" placeholder="请选择">
    <el-option
      v-for="item in options_type"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    </el-select>
    <span class="demonstration">年级班级：</span>
    <el-select v-model="value" class="m-2" placeholder="请选择">
    <el-option
      v-for="item in options_status"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    </el-select>
    <span class="demonstration">学生姓名：</span>
    <el-form-item label="">
            <el-input class="type" v-model="form.name" placeholder="请输入学生姓名" />
            </el-form-item>
    <el-button type="primary">查询</el-button>
    <el-button plain>重置</el-button>
    </div>
    </div>
    <!-- 添加按钮 -->
    <div class="leave">
        <!-- <el-button type="primary" @click="router.push('/index/family-schoolInteraction/StudentLeaveList')">请假</el-button> -->
        <el-button text @click="dialogFormVisible" :icon="Edit" color="#626aef" >新增</el-button>
    </div>
    <el-card class="good-container">
    <!-- 评价列表渲染 -->
    <el-table :data="state.tableData"  tooltip-effect="dark" stripe style="width: 100%" border>
        <el-table-column prop="id" label="序号" width="100"  />
        <el-table-column prop="name" label="学生姓名" width="100" />
        <el-table-column prop="grade" label="年级班级" />
        <el-table-column prop="type" label="评价类型" />
        <el-table-column prop="content" label="评价内容" />
        <el-table-column prop="score" label="分值" />
        <el-table-column prop="people" label="发布者" />
        <el-table-column prop="date1" label="发布时间" />
        <el-table-column prop="name" label="操作" >
            <template #default="scope">
                <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      :page-size="state.pageSize"
      :current-page="state.currentPage"
      :page-sizes="state.pageSizes"
      @size-change="sizeChange"
      @current-change="changePage"
    />
  </el-card>
</template>

<script setup>
import {Edit} from '@element-plus/icons-vue'
import { onMounted, ref ,reactive} from 'vue'
import {alertliststore} from '../../../stores/counterzsq'
import axios from 'axios'
var $store = alertliststore();
var ShoplistData = ref({ list: [] });
// 发请求接受数据
onMounted(() => {
  list();
});
const list = () => {
  axios.get("/api/evaluate/list").then((res) => {
    console.log(res);
    ShoplistData.value.list = res.data.evallist;
    console.log(ShoplistData.value.list);
    goodslistpage();
  });
};
const goodslistpage = () =>{
  state.value.tableData = ShoplistData.value.list.slice(
      (state.value.currentPage - 1) * state.value.pageSize,
      state.value.currentPage * state.value.pageSize,
    );
    state.value.total = ShoplistData.value.list.length;
}

//创建响应式数据
const state = ref({
  tableData: [],
  total: 0,
  pageSize: 10,
  currentPage: 1,
  pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
});

const changePage = (val) => {
  console.log("翻页，当前为第几页", val);
  state.value.currentPage = val;
  list();
};

const sizeChange = (val) => {
  console.log("改变每页多少条，当前一页多少条数据", val);
  state.value.pageSize = val;
  state.value.currentPage = 1;
  list();
};
// 日期选择器
const value1 = ref('')
const value2 = ref('')
// 下拉框
const value = ref('')
// 日期选择定义
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
// 下拉框选择类型
const options_type = [
  {
    value: 'Option1',
    label: '第一学期',
  },
  {
    value: 'Option2',
    label: '第二学期',
  },
]
const options_status = [
  {
    value: 'Option1',
    label: '一年级一班',
  },
  {
    value: 'Option2',
    label: '二年级二班',
  },
  {
    value: 'Option2',
    label: '二年级三班',
  },
  {
    value: 'Option2',
    label: '三年级二班',
  },
  {
    value: 'Option2',
    label: '六年级二班',
  },
]





const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const dialogCkeakVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

// / 点击删除时删除本行数据
//定义函数
var deleteRow = (row)=>{
  console.log(row);
  $store.evaluatedelete(row);
}

</script>

<style scoped>
.demo-date-picker {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.demo-date-picker .block {
  /* padding: 30px 0; */
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  flex: 1;
  width: 0;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-around;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-range-editor.el-input__inner {
    display: inline-flex;
    align-items: center;
    padding: 6px 20px;
    /* margin: 0 50px; */
}
.el-date-picker{
    width: 300px;
    margin: 0 50px;

    /* margin: 0 20px; */
}

.demo-date-picker .demonstration[data-v-a9b5c844]{
  width: 132px;
}

.el-button{
    margin: 0 5px;
}
.leave{
    display: flex;
    justify-content: flex-end;
    margin: 5px 10px;
}
.teacher{
    height: 60px;
    line-height: 50px;
    margin:10px 0 20px 50px;
}
.checkleave{
    margin-left: 20px;
    font-size: 17px;
}
</style>